import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router-dom'
import Popup from '@/components/Popup'
import ListScroller from '@/components/ListScroller'
import css from './episode.module.scss'
class BangumiEpisode extends PureComponent {
    popupRef = React.createRef()
    epRef = React.createRef()
    seasonRef = React.createRef()

    static propTypes = {
        detailData: PropTypes.object
    }

    get hasDetailData() {
        return !!this.props.detailData
    }

    get info() {
        return this.props.detailData
    }

    get epInfo() {
        return this.props?.detailData?.epInfo ?? {}
    }

    get epList() {
        return this.props?.detailData?.epList ?? []
    }

    get currentEpisodeId() {
        return this.props?.detailData?.id ?? -1
    }           
    
    get seasons() {    
        return this.props?.detailData?.seasonList ?? []           
    }

    get currentSeasonId() {
        return this.props?.detailData?.ssId ?? -1
    }    

    get pubInfo() {
        return this.props?.detailData?.pubInfo ?? {}
    }

    get pubText() {
        const { mediaInfo, newestEp } = this.info
        if (mediaInfo.mode === 1) {
            return ''
        }
        if (this.pubInfo.is_finish === 1) {
            const type = mediaInfo.type === 1 || mediaInfo.type === 4 ? '话' : '集'
            return `全${mediaInfo.total || 1}${type}`
        }
        return `更新至${this.getUpdateStr(newestEp.title, mediaInfo.type)}`
    }

    get enableMore() {
        return this.epList.length > 3
    }

    getUpdateStr = (num, type) => {
        const i = Number(num)
        const n = [1, 4, '番剧', '国创'].indexOf(type) > -1 ? '话' : '集'
        return isNaN(i) ? num : '第'.concat(i).concat(n)
    }
    formatTitle = (value, type) => {
        return isNaN(value) ? value : ('第' + value + (type === 1 || type === 4 ? '话' : '集'))
    }

    handleEp = item => {
        this.popupRef.current && this.popupRef.current.hide()
        this.props.history.push(`/bangumi/ep${item.id}`)
    }

    handleSeason = item => {
        this.props.history.push(`/bangumi/ss${item.season_id}`)
    }

    handlePopup = () => {
        this.popupRef.current && this.popupRef.current.show()
    }

    focusItem = (ref) => {        
        const current = ref.current
        const $el = current.getContentNode().querySelector('.active')    
        $el && current.scrollToElement($el, 300)
    }
    
    render() {
        const currentEpId = this.currentEpisodeId
        const currentSeasonId = this.currentSeasonId
        const epList = this.epList
        return (
            <div className={css["wrap"]}>
                <div className={css["head"]}>
                    <span className={css["title"]}>选集</span>
                    { this.enableMore && <span className={css["more"]} onClick={this.handlePopup}>{this.pubText}
                        <i className="fa fa-dropright"></i>
                    </span>
                    }
                </div>
                {
                    epList.length > 0 && <ListScroller ref={this.epRef} className={css['ep-list']} scrollX onInit={() => this.focusItem(this.epRef)}>
                        {
                            epList.map(item => {
                                return (
                                    <div key={item.id} onClick={() => this.handleEp(item)} className={
                                        `${css["ep-item"]} ${currentEpId === item.id ? 'active' : ''} ${!item.long_title ? css['signle-line'] : ''}`
                                    }>
                                        <h4 className={css["ep-title"]}>{ this.formatTitle(item.title, this.info.mediaInfo.type) }</h4>
                                        { item.long_title && <div className={css["ep-desc"]}>{ item.long_title }</div> }
                                        { item.badge_info.text && <div className={css["ep-badge"]}>{ item.badge_info.text }</div>}
                                    </div>
                                )
                            })
                        }                        
                    </ListScroller>
                }                                
                { this.seasons.length > 0 && 
                    <ListScroller ref={this.seasonRef} className={css['season-list']} scrollX onInit={() => this.focusItem(this.seasonRef)}>
                        {
                            this.seasons.map(item => {
                                return (
                                    <div key={item.season_id} onClick={() => this.handleSeason(item)} className={
                                        `${css["season-item"]} ${currentSeasonId === item.season_id ? 'active' : ''}`
                                    }>
                                        <div className="inner">{ item.season_title }</div>
                                    </div>
                                )
                            })
                        } 
                    </ListScroller>
                }  
                
                {
                    this.enableMore && <Popup className={css["v-popup"]} title={`选集(${epList.length})`} ref={this.popupRef}>                                        
                        {
                            epList.map(item => {
                                return (
                                    <div key={item.id} onClick={() => this.handleEp(item)} className={
                                        `${css["ep-item"]} ${currentEpId === item.id ? 'active' : ''} ${!item.long_title ? css['signle-line'] : ''}`
                                    }>
                                        <h4 className={css["ep-title"]}>{ this.formatTitle(item.title, this.info.mediaInfo.type) }</h4>
                                        { item.long_title && <div className={css["ep-desc"]}>{ item.long_title }</div> }
                                        { item.badge_info.text && <div className={css["ep-badge"]}>{ item.badge_info.text }</div>}
                                    </div>
                                )
                            })
                        }              
                    </Popup>         
                }                                     
            </div>
        )
    }
}

export default withRouter(BangumiEpisode)